<template>
  <div class="app-container">
    <div class="customContainer">
      <!-- 搜索头 -->
      <el-form :inline="true" class="demo-form-inline" size="small">
        <el-form-item class="pull-right">
          {{store_name}} 　{{$route.params.time}}
          <el-tooltip class="item" effect="dark" placement="bottom-end">
            <div slot="content" style="line-height:20px;">
              选择仓:可选择主仓，中转仓与机台仓
              <br> 主仓-实际库存:包含冻结的礼品数
              <br> 主仓-可用库存:不包含冻结的礼品数
            </div>
            <i class="el-icon-question"></i>
          </el-tooltip>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formInline.warehouse" style="width:120px;" @change="warehouseChange">
            <el-option label="主仓" value="1"></el-option>
            <el-option label="中转仓" value="2"></el-option>
            <el-option label="机台仓" value="3"></el-option>
          </el-select>
          <el-select v-if="formInline.warehouse==2" v-model="formInline.house_id" style="width:120px;">
            <el-option v-for="item in houseList" :key="item.house_id" :label="item.house_name" :value="item.house_id"></el-option>
          </el-select>
          <el-select v-if="formInline.warehouse==1" v-model="formInline.type" style="width:120px;">
            <el-option label="可用库存" value="1"></el-option>
            <el-option label="实际库存" value="2"></el-option>
          </el-select>
          <el-select v-if="formInline.warehouse==3" v-model="formInline.area_id" style="width:120px;">
            <el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        &#x3000;
        <el-form-item>
          <el-select v-model="formInline.conditions" style="width:140px;">
            <el-option label="搜礼品名称" value="3"></el-option>
            <el-option label="搜新礼品编号" value="1"></el-option>
            <el-option label="搜神采礼品编号" value="2"></el-option>
          </el-select>
          <el-input v-model="formInline.gift_id" placeholder="请输入礼品编号/名称" style="width:160px;" @keyup.enter.native="searchClick"></el-input>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick">
            <template #default>搜索</template>
          </dj-button>
        </el-form-item>
      </el-form>
      <!-- 列表 -->
      <transition name="fade" mode="out-in">
        <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="small" :key="formInline.warehouse">
          <el-table-column v-if="formInline.warehouse==3" align="center" label='机台号' width="60">
            <template slot-scope="scope">
              {{scope.row.area_name}}-{{scope.row.mno}}
            </template>
          </el-table-column>
          <el-table-column v-if="formInline.warehouse==3" align="center" label="机台名称" prop="machine_type">
          </el-table-column>
          <el-table-column align="center" label="礼品图片" width="80">
            <template slot-scope="scope">
              <img :src="scope.row.thumb" width="60" height="60" alt="">
            </template>
          </el-table-column>
          <el-table-column align="center" label="新礼品编号" prop="gift_id"></el-table-column>
          <el-table-column align="center" label="神采礼品编号" prop="no_obsolete" sortable></el-table-column>
          <el-table-column align="center" label='礼品名称' prop="gift_name"></el-table-column>
          <el-table-column align="center" label="箱规" prop="box_num"></el-table-column>
          <el-table-column align="center" label='尺寸' prop="size">
            <template slot-scope="scope">
              {{scope.row.size?scope.row.size*1:'-'}}
            </template>
          </el-table-column>
          <el-table-column align="center" label='分类' prop="type_name"></el-table-column>
          <el-table-column align="center" label='成本价'>
            <template slot-scope="scope">
              <!-- 保留小数 -->
              {{scope.row.money_cost|keepTwoNum}}
            </template>
          </el-table-column>
          <el-table-column v-if="formInline.warehouse==3" align="center" label='实时库存量' prop="num" sortable>
          </el-table-column>
          <el-table-column v-else align="center" label='库存量' prop="num" sortable></el-table-column>
          <el-table-column align="center" label='在库时间' prop="in_house_day" sortable></el-table-column>
        </el-table>
      </transition>
    </div>
    <!-- 自定义底部 -->
    <div class="bottom_box" v-if="list">
      <el-pagination class="pull-left" background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="20"
        layout="prev, pager, next, jumper" :total="totalDataNumber">
      </el-pagination>
      <span class="pull-right" style="margin-top:10px">
        总数量：{{num}}个　总金额：{{money|keepTwoNum}}元
      </span>
    </div>
  </div>
</template>

<script>
import { getList, getPage, getAreaList, houseList } from '@/api/storage_control/storeCollect_ditail';
export default {
  data() {
    return {
      store_name: '',
      num: '',
      money: '',
      list: null,
      listLoading: false,
      currentPage: 1,
      totalDataNumber: 0,
      areaList: [],
      houseList: [],
      formInline: {
        store_id: this.$route.params.store_id,
        warehouse: '1',
        house_id: '',
        type: '2',
        area_id: '',
        gift_id: '',
        gift_name: '',
        conditions: '3',
        time: this.$route.params.time
      }
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      //当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
      vm.beforeComingIn();
    });
  },
  methods: {
    beforeComingIn() {
      if (this.$route.query.routerflag) {
        this.formInline.time = this.$route.params.time;
        this.formInline.store_id = this.$route.params.store_id;
        this.formInline.warehouse = '1';
        this.formInline.type = '2';
        this.getArea();
        this.searchClick();
      }
    },
    // 搜索
    searchClick() {
      this.fetchData();
    },
    warehouseChange(id) {
      if (id == 2) {
        this.getHouseList();
      } else {
        this.fetchData();
      }
    },
    isToday(str) {
      return new Date().getTime() - new Date(str).getTime() < 86400000;
    },
    getHouseList() {
      let url = this.isToday(this.$route.params.time) ? '/Stock_check/get_channel' : '/Stock_store_inventory/get_ago_house';
      this.houseList = [];
      houseList({ store_id: this.formInline.store_id, time: this.$route.params.time }, url).then(response => {
        this.houseList = response;
        this.formInline.house_id = response.length > 0 ? response[0].house_id : '';
        this.fetchData();
      });
    },
    getArea() {
      this.areaList = [];
      getAreaList({ sid: this.formInline.store_id }).then(response => {
        this.areaList = response;
        this.formInline.area_id = response[0].id;
      });
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      this.currentPage = 1;
      getPage(this.formInline)
        .then(response => {
          this.totalDataNumber = response.page * 20;
          this.money = response.money;
          this.num = response.num;
          this.store_name = response.store_name;
          getList(this.formInline).then(response => {
            response.list.forEach(function(val, i) {
              val.num *= 1;
            });
            this.list = response.list;
            this.listLoading = false;
          });
        })
        .catch(res => {
          this.listLoading = false;
        });
    },
    // 分页
    handleCurrentChange(val) {
      this.listLoading = true;
      getList(this.formInline, val).then(response => {
        response.list.forEach(function(val, i) {
          val.num *= 1;
        });
        this.list = response.list;
        this.listLoading = false;
      });
    }
  }
};
</script>